<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>支付页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait">
		<meta name="full-screen" content="true" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" href="css/base.css" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	</head>
	<style>
		html,body{
			background: #f5f5f5;
		}
		.header{
			width: 100%;	
			height: 50px;		
			line-height: 50px;		
			text-align: center;
			border-bottom: 1px solid #ccc;	
			position: relative;
			background: #fbfbfb;
		}
		.header .backicon{
			position: absolute;
			height: 50px;
			width: 50px;
			text-align: center;
			left: 0px;
			top: 0px;
			
		}
		.header .backicon span{
			display: inline-block;
			width: 26px;
			height: 26px;
			background: url(img/back.png) center no-repeat;
			margin: 14px 0 0 14px;
			background-size: contain;
		}
		.header h1{
			font-size: 20px;
		}
		.w100{
			width: 100%;
			background: #fff;
			border-bottom: 1px solid #ccc;
		}
		.w90{
			width: 90%;
			margin: 0 auto;
			padding: 10px 0;
			
		}
		.orderinfo{
			margin-bottom: 10px;
		}
		.pay .pic{
			width: 15%;
			margin-right: 10px;
			vertical-align: baseline;
			margin-top: 6px;
		}
		.pay .pic img{
			background:contain;
			width:100%;
		}
		.pay .text{
			width: 70%;
			font-size: 14px;
		}
		.pay .text p{
			line-height: 22px;
		}
		.pay .text p span{
			color: #F66D00;
		}
		.zhifubao{
			padding: 10px 0;
			box-sizing: border-box;
		}
		.zhifubao .img{
			margin-top: 5px;
			width: 30px;
			height: 30px;
			background: url(img/img_zhifubao.png) no-repeat  left center;
			background-size: contain;
			margin-right: 10px;
		}
		.wechat .img{
			margin-top: 5px;
			width: 30px;
			height: 30px;
			background: url(img/img_weixin.png) no-repeat  left center;
			background-size: contain;
			margin-right: 10px;
		}
		.caifutong .img{
			margin-top: 4px;
			width: 63px;
			height: 30px;
			background: url(img/img_caifut.png) no-repeat  left center;
			background-size: contain;
			margin-right: 10px;
		}
		.zhifu{
			display: inline-block;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
		}
		.check_chose{
			width: 40px;
			height: 40px;
			background: url(img/chose.png) no-repeat right center;
			background-size: contain;
			margin-right:-20px;			
		}
		.checks{
			width: 40px;
			height: 40px;
			background: url(img/no_chose.png) no-repeat right center;
			background-size: contain;
			margin-right:-20px;
		}
		.footer{
			width: 100%;
			margin-top: 20px;
		}
		.zhifu_btn{
			width: 90%;
			margin: 0 auto;
			height: 40px;
			line-height: 40px;
			background: #F66D00;
			border-radius: 5px;
			text-align: center;
			font-size: 16px;
			color: #fff;

		}
	</style>
	<body>
		<div class="header">
			<h1>支付订单</h1>
			<div class="backicon" onclick="javascript:history.back(-1);"><span></span></div>
		</div>
		<div class="w100 orderinfo">
			<div class="pay  w90 clearfix">
				<div class="fl pic"><img src="img/icon.png" /></div>
				<div class="text fl">
					<p>订单已经生成，正在审核中</p>
					<p>网上订单等待支付</p>
					<p>您共需支付：<span>¥22.77</span></p>
				</div>
			</div>
		</div>
		<div class="w100">
			<div class="paytype zhifubao w90 clearfix">
				<div class="img fl"></div>
				<span class="fl zhifu">支付宝支付</span>
				<div class="choice_btn check_chose fr"></div>
			</div>
		</div>
		<div class="w100">
			<div class=" paytype wechat w90 clearfix">
				<div class="img fl"></div>
				<span class="fl zhifu">微信支付</span>
				<div class="choice_btn checks fr"></div>
			</div>
		</div>
		<div class="w100">
			<div class="paytype caifutong w90 clearfix">
				<div class="img fl"></div>
				<span class="fl zhifu">财付通支付</span>
				<div class="choice_btn checks fr"></div>
			</div>
		</div>
		<div class="footer">
			<div class="zhifu_btn" onclick="location.href = 'dingdanzhifu.html';return false;">立即支付</div>
		</div>		
	</body>
	<script>


		$(".choice_btn").click(function(){
			$(this).each(function(i){
				if($(".choice_btn").hasClass("checks")){
					$(this).removeClass("checks").addClass("check_chose").parents().siblings("div").find(".choice_btn").removeClass("check_chose").addClass("checks");
					
				}
			});											
		});
	</script>
</html>
